<template>
  <div class="main">
    <ul class="left-content">
      <li class="l-item"><h3>机器人：现代科技奇迹</h3></li>
      <li class="l-item"><span>传承人文科学</span></li>
    </ul>
    <div class="right-content">
      <div class="robot-img">
        <img src="../assets/image/temp.jpg" alt="" />
      </div>
    </div>
    <div class="hand">
      <img src="../assets/image/hand.png" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$parent.$emit('main', '111')
  }
};
</script>

<style lang="scss" scoped>
.main {
  position: relative;
  .left-content {
    position: absolute;
    top: 20rem;
    left: 3rem;
    width: 45rem;
    height: 20rem;
    line-height: 1.5;
    .l-item {
      font-size: 4rem;
      color: #fff;
      span {
        font-size: 3rem;
      }
    }
  }
  .right-content {
    position: absolute;
    right: 14rem;
    top: 20rem;
    .robot-img {
      img {
        width: 65rem;
        height: 36rem;
      }
    }
  }
  .hand {
    position: absolute;
    right: 0rem;
    top: 9.4rem;
    img {
      width: 35rem;
    }
  }
}
</style>